<template>
  <div class="tabControl-container">
    <div class="tabControl">
      <div class="control-item" v-for="(item,index) in tabControlList" :key="index">
        <p class="item" :class="{active:currentIndex===index}" @click="changeIndex(index)">{{ item }}</p>
      </div>

    </div>
    <template  v-if="currentIndex === 0 && goodsList!==[]" >
    <div class="goods-container">
      <div class="goods-item"  v-for="(item,index) in goodsList" :key="index">
        <div class="good-img"><img :src="item.cover_url" lazy-load alt="" @click="goGoodsDetail(item.id)"></div>
        <p class="title">{{ item.title }}</p>
        <div class="good-info">
          <span class="price">￥ {{ item.price }}</span>
         <div class="shoucang">
<!--            <van-icon name="star-o" />-->
<!--            <van-icon ="15"  name="star-o" color="#ee0a24" />-->
           <van-icon size="15" @click="addCollect(item.id)"  name="star-o" />
<!--           <van-icon size="15" color="#ee0a24" v-else name="star" />-->

           <span class="count">{{ item.collects_count }}</span>
         </div>
        </div>
      </div>
    </div>
    </template>

    <template v-if="currentIndex === 1 && goodsList!==[]" >
      <div class="goods-container">
        <div class="goods-item" v-for="(item,index) in goodsList" :key="index">
          <div class="good-img" ><img :src="item.cover_url" alt="" @click="goGoodsDetail(item.id)"></div>
          <p class="title">{{ item.title }}</p>
          <div class="good-info">
            <span class="price">￥ {{ item.price }}</span>
            <div class="shoucang">
              <van-icon size="15" @click="addCollect(item.id)"  name="star-o"  />
<!--              <van-icon size="15" color="#ee0a24" v-else name="star" />-->
              <span class="count">{{ item.collects_count }}</span>
            </div>
          </div>
        </div>
      </div>
    </template>

    <template v-if="currentIndex === 2 && goodsList!==[]" >
      <div class="goods-container">
        <div class="goods-item" v-for="(item,index) in goodsList" :key="index">
          <div class="good-img"><img :src="item.cover_url" alt="" @click="goGoodsDetail(item.id)"></div>
          <p class="title">{{ item.title }}</p>
          <div class="good-info">
            <span class="price">￥ {{ item.price }}</span>
            <div class="shoucang">
              <van-icon size="15" @click="addCollect(item.id)"  name="star-o"  />
<!--              <van-icon size="15" color="#ee0a24" v-else name="star" />-->
              <span class="count">{{ item.collects_count }}</span>
            </div>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import {collectGoods} from "../../../api/home/home";
import {Toast} from "vant";
export default {
  name: "TabControl",
  props:['goodsList'],
  data(){
    return{
      tabControlList:['畅销','新书','精选'],
      currentIndex:0,
      collection:true
    }
  },
  mounted() {
  },

  methods:{
    changeIndex(index){
      this.currentIndex = index
      this.$emit('currentIndex',index)

    },
    goGoodsDetail(id){
      this.$router.push({path:'goodsDetail',query:{'goodsId':id}})
    },
    async addCollect(id){
      const res = await collectGoods(id)
      if(res && res.status === 201){
        this.collection = false
        Toast.success('收藏成功')
        this.$emit('collect')
      }else if(res && res.status === 204){
        Toast.success('已取消收藏')
        this.$emit('collect')
      }else {
        Toast.fail('收藏失败')
      }
      console.log(res);
    }
  },
}
</script>

<style scoped lang="css">
   .tabControl-container{
     width: 100%;
     margin-top: 20px;
     /*margin-bottom: 52px;*/
     padding-bottom: 60px;
   }
   .tabControl{
     position: sticky;
     /*z-index: 9999999;*/
     top: 45px;
     /*width: 100%;*/
     display: flex;
     justify-content: space-between;
     padding: 8px;
     background-color: #fff;
   }
   .control-item{
     display: flex;
     font-size: 14px;
     flex: 1;
     text-align: center;
     justify-content: center;
     align-items: center;
   }
   .active{
     color: #42bBaa;
     border-bottom: 3px #42bBaa solid;
   }
   .item{
     /*height: 30px;*/
     width: 38px;
     height: 20px;
     padding: 3px;
     /*border-bottom: 2px #42bBaa solid;*/
   }
   .goods-container{
     width: 100%;
     margin-top: 10px;
     display: flex;
     flex-wrap: wrap;
     background-color: #fff;

   }
   .goods-item{
     width: 50%;
     margin-top: 10px;


   }
   .goods-item img{
     width: 100%;
     height: 100%;
   }
   .good-info{
     display: flex;
     justify-content: center;
     align-items: center;
     /*padding: 4px;*/
   }
   .shoucang{
     margin-left: 8px;
     display: flex;
     align-items: center;
   }
   .title{
     font-size: 16px;
     text-align: center;
   }
   .good-img{
     width: 150px;
     height: 150px;
     margin-left: 20px;
     margin-bottom: 5px;
   }
   .price{
     color: red;
     font-size: 14px;
     text-align: center;
   }
   .count{
     font-size: 14px;
     text-align: center;
   }
   .iconfont{
     height: 14px;
     width: 14px;
   }

</style>